<template>
  <div class="container">
    <el-container class="home-container">
      <!-- 头部导航栏 -->
      <el-header>
        <div class="header">
          <img
            src="https://www.nsu.edu.cn/img/logo.png"
            alt=""
          >
         <span> | 超级管理员</span>
        </div>
        <el-button
          type="primary"
          @click="loginout"
        >退出登录</el-button>
      </el-header>
      <!-- 侧边栏 -->
      <el-container>
        <el-aside width="250px">
          <!-- 菜单栏 -->
          <el-menu
            background-color="#496EE3"
            text-color="#fff"
            active-text-color="#00FFFF"
            unique-opened
            :router="true"
          >
            <el-submenu index="/permissions">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>权限管理</span>
              </template>

              <el-menu-item index="/student" style="background-color: #356189">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>学生负责人</span>
                </template>
              </el-menu-item>
              
              <el-menu-item index="/manager">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>普通管理员</span>
                </template>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="/form">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>表单管理</span>
              </template>

              <el-menu-item index="/shenpi">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>待审批表单</span>
                </template>
              </el-menu-item>

              <el-menu-item index="/shenpi_1">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>已审批表单</span>
                </template>
              </el-menu-item>

              <el-menu-item index="/number">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>表单数量统计</span>
                </template>
              </el-menu-item>

               <el-menu-item index="/yunxing">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>实验室运行记录表</span>
                </template>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="/equipment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>设备管理</span>
              </template>

              <el-menu-item index="/warehouse">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>设备仓库</span>
                </template>
              </el-menu-item>

              <el-menu-item index="/lend">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>借出设备</span>
                </template>
              </el-menu-item>

               <el-menu-item index="/back">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>设备归还</span>
                </template>
              </el-menu-item>
            </el-submenu>

              <el-menu-item index="/laboratory">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>实验室信息</span>
              </template>
            </el-menu-item>


            <el-menu-item index="/information">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>个人信息管理</span>
              </template>
            </el-menu-item>

          </el-menu>
        </el-aside>
        <!-- 主体区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    loginout() {
      this.$router.push("/login");
    },
  },
};
</script>

<style>
.container {
  height: 100%;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #1B3AA4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
}

.header img {
  width: 180px;
}

.el-aside {
  background-color: #496EE3;
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  background-color: #eaedf1;
}
.header span {
  color: #fff;
  font-size: 20px;
  margin-left: 49px;
}
</style>